<template>
  <view class="user-list">
    <view class="search-box">
      <uni-easyinput confirmType="search" prefixIcon="search" v-model="searchKey" :trim="true" placeholder="搜索用户" @confirm="searchUser"></uni-easyinput>
    </view>
    <view class="user-box">
      <view v-if="!isFirstLoad && !userList.length" class="no-content">
        {{ searchKey ? '未找到该用户' : '暂无可选择的用户' }}，你可以
        <view class="operate-box">
          <view class="btn-primary" @click="toInvite()">邀请成员</view>
        </view>
      </view>
      <view
       v-for="item in userList"
       :key="item.key"
       @click="chooseUser(item)"
       class="user-item-box"
       :class="{ 'in-project': item.isInProject, 'selected': selectedUserId === item.userId }">
        <view class="user-item">
          <i v-if="!item.userIcon" class="user-icon iconfont icon-userCenter" />
          <image v-else class="user-icon" :src="item.userIcon"></image>
          <view class="user-name">{{ item.userName }}</view>
          <view class="user-phone">{{ item.userPhone }}</view>
        </view>
      </view>
    </view>
    <view v-if="selectedUser" class="bottom-box">
      <view class="selected-user">
        <view class="title">已选用户</view>
        <view class="user-box">
          <view class="user-name">{{ selectedUser.userName }}</view>
          <view class="user-phone">{{ selectedUser.userPhone }}</view>
        </view>
      </view>
      <view class="submit-btn" @click="submit">确定</view>
    </view>
  </view>
</template>

<script>
import mixin from '@/mixins/index.js'
import { getImagePath, formatPhone } from '@/utils/index.js'
import color from '@/envs/_/variables.scss'
export default {
  mixins: [mixin],
  data() {
    return {
      searchKey: '',
      isFirstLoad: true,
      currMembers: [],
      userList: [],
      pagination: {
        page: 1,
        pageSize: 10,
        total: 0
      },
      selectedUser: null,
      selectedUserId: '',
      color
    }
  },
  mounted() {
    const self = this
    const memberIds = `${self.params.ids || ''}`.trim()
    if (memberIds) {
      self.currMembers = Array.from(memberIds.split(','), item => Number(item))
    }
    self.searchUser()
  },
  methods: {
    searchUser() {
      const self = this
      uni.request({
        url: '/user/search',
        data: {
          key: self.searchKey
        },
        success(result) {
          self.isFirstLoad = false
          if (result.data.success && Array.isArray(result.data.data)) {
            const arr = []
            result.data.data.forEach(item => {
              arr.push({
                key: item.id,
                userId: item.id,
                userIcon: getImagePath(item.photo),
                userName: item.name || '未设置昵称',
                userPhone: formatPhone(item.phone),
                remark: item.remark || '',
                isInProject: self.currMembers.includes(item.id)
              })
            })
            self.userList = arr
            self.$forceUpdate()
          }
        }
      })
    },
    toInvite() {
      const pages = getCurrentPages()
      const prevPage = pages[pages.length - 2]
      prevPage.$vm.shareProject()
      uni.navigateBack({
        delta: 1
      })
    },
    chooseUser(user) {
      if (user.isInProject) {
        return
      }
      const self = this
      if (self.selectedUser === user) {
        self.selectedUser = null
        self.selectedUserId = ''
        return
      }
      self.selectedUser = user
      self.selectedUserId = user.userId
      self.$forceUpdate()
    },
    submit() {
      const self = this
      uni.request({
        url: '/project_members/add',
        method: 'POST',
        data: {
          xm_id: self.params.projectId,
          user_id: self.selectedUser.userId,
          permission: '',
          state: 1,
          show_on_wall: 0
        },
        success(result) {
          if (result.data.success) {
            uni.navigateBack({
              delta: 1
            })
          }
        }
      })
    }
  }
}
</script>

<style lang="scss" scoped>
.user-list {
  min-height: 100vh;
  background-color: $white;
  padding: 30rpx 30rpx 360rpx;
  .search-box {
  }
  .user-box {
    .no-content {
      margin-top: 30vh;
      text-align: center;
      .btn-primary {
        display: inline-flex;
        margin-top: 20rpx;
        padding: 10rpx 30rpx;
        border-radius: 10rpx;
        background-color: $primary;
        color: $white;
        font-size: $font-size-5;
      }
    }
    .user-item-box {
      position: relative;
      margin-top: 30rpx;
      border: 2rpx dashed $border-base;
      border-radius: 10rpx;
      padding: 20rpx;
      &.in-project {
        border-color: $primary;
        &:before {
          content: '已在项目';
          position: absolute;
          right: -2rpx;
          top: -2rpx;
          padding: 4rpx 10rpx;
          font-size: $font-size-0;
          background-color: $primary;
          color: $white;
          border-top-right-radius: 10rpx;
          border-bottom-left-radius: 10rpx;
        }
      }
      &.selected {
        border: 2rpx solid $primary;
      }
    }
    .user-item {
      position: relative;
      padding: 20rpx 0 20rpx 80rpx;
      height: 60rpx;
      display: flex;
      align-items: center;
      .user-icon {
        position: absolute;
        left: 0;
        top: 0;
        width: 60rpx;
        height: 60rpx;
        border-radius: 50%;
        font-size: 60rpx;
        color: $primary;
      }
      .user-name {
        flex: 1;
        max-width: 380rpx;
        text-overflow: ellipsis;
        overflow: hidden;
        white-space: nowrap;
      }
      .user-phone {
        flex: none;
        width: 200rpx;
      }
    }
  }
}
.bottom-box {
  background-color: $white;
  border-top: 2rpx solid $border-base;
  padding-top: 20rpx;
  position: fixed;
  left: 0;
  right: 0;
  bottom: 0;
  .title {
    font-size: $font-size-3;
    margin-bottom: 10rpx;
  }
  .selected-user {
    position: relative;
    padding: 0 30rpx;
    margin-bottom: 20rpx;
    .user-box {
      font-size: $font-size-1;
      display: flex;
      align-items: center;
    }
    .user-name {
      max-width: 380rpx;
      text-overflow: ellipsis;
      overflow: hidden;
      white-space: nowrap;
      margin-right: 20rpx;
    }
    .user-phone {
      flex: none;
      width: 200rpx;
    }
  }
  .permission-box {
    margin-bottom: 20rpx;
    padding: 0 30rpx;
  }
  .submit-btn {
    background-color: $primary;
    color: $white;
    height: 100rpx;
    text-align: center;
    line-height: 100rpx;
    font-size: $font-size-4;
  }
}
</style>
